<template>
  <view>
    <!-- 我的设备和门店 -->
    <view class="choose-tab">
      <view
        class="choose-tab-item"
        :class="chooseTab == 0 ? 'activeOne' : ''"
        data-choose="0"
        @tap="clickTab"
      >
        我的门店
      </view>
      <view
        class="choose-tab-item"
        :class="chooseTab == 1 ? 'activeTwo' : ''"
        data-choose="1"
        @tap="clickTab"
      >
        分享给我的设备({{ deviceCount }})
      </view>
    </view>
    <!-- 我的设备和门店 -->
    <view v-if="chooseTab == 0">
      <view class="home_page">
        <view class="head-control">
          <!-- 切换设备和绑定设备 -->
          <view class="left_right_control">
            <view class="left-home">
              <uni-data-select
                class="store-select"
                v-model="storeId"
                :localdata="range"
                @change="change"
                :clear="false"
              ></uni-data-select>
            </view>
            <!-- 扫码绑设备 -->
            <view
              class="right-add"
              @tap="bindDevice"
            >
              <image
                class="right-add-img"
                src="https://mkservice.mk-iot.com/subFile/mk2240/addhome.png"
              />
              <text class="right-add-text">添加</text>
            </view>
          </view>
          <!-- 中间操作说明 -->
          <view class="img-barnner">
            <image
              src="https://mkservice.mk-iot.com/subFile/mk2240/banner.png"
              mode="widthFix"
              @tap="gotoOpeating"
            />
          </view>
        </view>
        <!-- 设备列表盒子 -->
        <view class="divice-list">
          <!-- 设备分类选项 -->
          <view class="divice-tabs">
            <!-- 左边文本 -->
            <text
              class="device-text"
              @tap="changehomeAll"
              data-all="-1"
              >所有分类</text
            >
            <!-- 右边选项 -->
            <view class="divece-tab">
              <scroll-view
                class="scroll-view_H"
                scroll-x="true"
                scroll-y="true"
              >
                <view class="tag-view">
                  <view style="height: 5px"></view>
                  <uni-tag
                    v-for="(item, index) in deviceTypeList"
                    :key="index"
                    :inverted="item.id !== tagActive"
                    :circle="true"
                    :text="item.name"
                    type="primary"
                    @tap="changeTag(item.id)"
                    style="margin-left: 10rpx"
                  />
                  <view style="height: 5px"></view>
                </view>
              </scroll-view>
            </view>
          </view>
          <!-- 每个设备样式 -->
          <view class="list-container">
            <scroll-view
              class="scroll-list"
              scroll-y="true"
              :style="'height:' + clientHeight + 'px;'"
            >
              <view
                v-if="deviceList.length > 0"
                class="base-list"
              >
                <view
                  v-for="(item, index) in deviceList"
                  :key="index"
                >
                  <view
                    :class="
                      (index + 1) % 2 !== 0
                        ? 'base-item base-item-left'
                        : 'base-item'
                    "
                    @tap="
                      gotodeviceContol(
                        item.equipmentNo,
                        item.equipmentTypeId,
                        item.online
                      )
                    "
                  >
                    <view class="divece-all">
                      <view class="isline">
                        <image
                          :src="
                            item.online
                              ? 'https://mkservice.mk-iot.com/subFile/mk2240/line.png'
                              : 'https://mkservice.mk-iot.com/subFile/mk2240/offline.png'
                          "
                        />
                        <text>{{ item.online ? '在线' : '离线' }}</text>
                      </view>
                      <view class="divece-right">
                        <view class="base-icon">
                          <image
                            class="base-icon-images"
                            src="https://mkservice.mk-iot.com/subFile/mk2240/device.png"
                            mode="aspectFit"
                          />
                        </view>
                      </view>
                      <view class="divece-left">
                        <view class="base-name">{{ item.equipmentName }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <!-- 暂无设备页 -->
              <view
                class="no-devicelist"
                v-if="deviceList.length <= 0"
              >
                <image
                  src="https://mkservice.mk-iot.com/subFile/mk2240/no-device.png"
                  alt=""
                />
                <text>暂无设备</text>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <!-- 这是啥 -->
    <view v-else>
      <scroll-view
        scroll-y="true"
        :style="'height:' + deivceHeight + 'px;'"
      >
        <view
          class="store_device_content"
          v-if="myShareByList.length > 0"
        >
          <uni-list
            border-full
            v-for="(item, index) in myShareByList"
            :key="index"
          >
            <uni-list-item
              :title="item.mkEquipment.equipmentName"
              :note="item.equipmentStoreNo"
              showArrow
              @tap="gotodetaile(item.shareType, item.equipmentStoreNo)"
            />
          </uni-list>
        </view>
        <view
          class="no-devicelist"
          v-if="myShareByList.length <= 0"
        >
          <image
            src="https://mkservice.mk-iot.com/subFile/mk2240/no-device.png"
            alt=""
          />
          <text>暂无分享设备</text>
        </view>
      </scroll-view>
    </view>

    <!--底部导航栏封装-->
    <nvatab :selected="index"></nvatab>
  </view>
</template>

<script>
  import { myStoreAndShareList } from '@/api/system/store/store.js'
  import { myShareList } from '@/api/system/store/shareRecord.js'
  import nvatab from '../components/tabbar/index.vue'
  import { listConfig } from '@/api/system/config/config.js'
  import mqtt from '@/utils/mqtt4.1.0.js'
  import getdateTime from '../../utils/getdateTime'
  export default {
    components: {
      nvatab,
    },
    data() {
      return {
        // 是否正在请求数据,节流阀
        isloading: false,
        chooseTab: 0,
        clientHeight: 0,
        deivceHeight: 0,
        active: 0,
        index: 0,
        tagActive: -1,
        userId: uni.getStorageSync('userId'),
        // 理论上这个是设备id列表
        deviceList: [],
        storeId: null,
        storeName: null,
        range: [],
        // 这里面有设备id的列表
        storeList: [],
        queryParams: {
          userId: null,
        },
        shareQueryParams: {
          pageNum: 1,
          pageSize: 6,
          recipientId: uni.getStorageSync('userId'),
          shareType: 0,
        },
        deviceCount: 0,
        myShareByList: [],
        deviceTypeList: [],
        bag_url: '',
        isAdmin: false,
        realIndexTime: null, //实时数据对象(用于关闭实时刷新方法)
        // client: null,
        // connectOptions: {
        //   timeout: MQTT_OPTIONS.timeout,
        //   useSSL: MQTT_OPTIONS.useSSL,
        //   cleanSession: MQTT_OPTIONS.cleanSession,
        //   keepAliveInterval: MQTT_OPTIONS.keepAliveInterval,
        //   reconnect: MQTT_OPTIONS.reconnect,
        //   mqttVersion: MQTT_OPTIONS.mqttVersion,
        //   userName: MQTT_OPTIONS.username,
        //   password: MQTT_OPTIONS.password,
        //   onsuccess: () => {
        //     console.log('重连是否成功')
        //   },
        //   onFailure: (err) => {
        //     console.log('重连是否失败', err)
        //   },
        // },
        // equipmentNo: uni.getStorageSync('equipmentNo'),
        // 连接实例
        serve: {
          host: 'mk-iot.com',
          wsport: '8083',
          wssport: '443',
          path: '/ws/',
        },
        url: 'wxs://mk-iot.com/mqttwss',
        // 订阅主题
        onTopic: 'test',
        Qos: 2,
        // 发布主题
        onSub: 'test',

        sendMassage: '123',
        // 接收到的消息

        receiveMessage: '',
        // 重连次数和重连时间
        reconnectCounter: 0,
        reconnectStartTime: null,
        time: 0,

        client: null,
        //MQTT连接的配置
        options: {
          wsOptions: {},
          protocolVersion: 5, //MQTT连接协议版本
          clientId: '123',
          keepalive: 3,
          clean: false,
          username: 'test',
          password: 'root',
          reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
          connectTimeout: 3 * 1000, //1000毫秒，两次重新连接之间的间隔
          resubscribe: true, //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
        },
        // 默认编号
        defaultDeviceNumber: '',
      }
    },
    onLoad() {
      this.gethight()
      // 连接mqtt实例
      this.connect()
      this.tagActive = -1
      //判断是否存在门店缓存，如果存在就直接显示该门店设备
      if (uni.getStorageSync('storeId') != '') {
        this.storeId = uni.getStorageSync('storeId')
        this.getDeviceList()
        this.getDeviceTypeList()
      } else {
        //查询当前门店
        this.getStoreList()
      }
    },
    onShow() {
      //查询分享给我的设备
      this.empty()
      this.gethight()
      this.queryMyshareList()
      // 连接mqtt
      // this.connect()
    },
    methods: {
      gethight() {
        var thant = this
        uni.getSystemInfo({
          success: function (res) {
            let screenHeight = uni.getSystemInfoSync().windowHeight //获取屏幕高度
            // 通过query 获取其余盒子的高度
            let query = uni.createSelectorQuery().in(thant)
            if (thant.chooseTab == 0) {
              query.select('.choose-tab').boundingClientRect()
              query.select('.head-control').boundingClientRect()
              query.select('.divice-tabs').boundingClientRect()
              //通过query.exec返回的数组 进行减法 同时 去除margin 和border的
              query.exec((res) => {
                let h1 = res[0].height
                let h2 = res[1].height
                let h3 = res[2].height
                let scrollHeight = screenHeight - h1 - h2 - h3 - 65
                thant.clientHeight = scrollHeight
              })
            } else {
              query.select('.choose-tab').boundingClientRect()
              //通过query.exec返回的数组 进行减法 同时 去除margin 和border的
              query.exec((res) => {
                let h1 = res[0].height
                let scrollHeight = screenHeight - h1
                thant.deivceHeight = scrollHeight
              })
            }
          },
        })
      },
      // 切换获取设备列表
      clickTab: function (e) {
        //点击切换
        this.chooseTab = e.target.dataset.choose
        if (this.chooseTab == 0) {
          this.tagActive = -1
          this.getDeviceList()
          this.getDeviceTypeList()
        } else if (this.chooseTab == 1) {
          this.empty()
          this.gethight()
          this.queryMyshareList()
        }
      },
      //查询门店列表
      getStoreList() {
        this.$modal.loading('数据加载中...')
        this.queryParams.userId = this.userId
        //查询个人的门店和查询已经接受分享的门店
        myStoreAndShareList(this.queryParams).then((response) => {
          if (response.code == 200) {
            // 关闭遮罩层
            this.$modal.closeLoading()
            this.storeList = response.rows
            console.log('门店列表里面返回的设备id', response.rows)

            if (this.storeId == null) {
              //获取数据后
              //默认第一个门店
              this.range = response.rows.map((x) => ({
                value: parseInt(x.storeId),
                text: x.storeName,
              }))
              this.storeId = this.range[0].value
              //存到缓存
              uni.setStorageSync('storeId', this.range[0].value)
              this.storeName = this.range[0].text
              //默认显示第一个门店的设备
              this.deviceList = response.rows[0].mkEquipments
              this.isAdmin = response.rows[0].isAdmin == '1' ? true : false
              // 更新到默认编号里去
              console.log('门店列表的id1', response.rows[0].mkEquipments)
              this.defaultDeviceNumber =
                response.rows[0].mkEquipments[0].equipmentNo
            } else {
              this.getDeviceList()
            }
            //根据设备列表显示设备分类
            this.getDeviceTypeList()
          }
        })
      },
      //查询我的分享列表
      queryMyshareList(cb) {
        // 打开遮罩层
        this.$modal.loading('数据加载中...')
        // ** 打开节流阀
        this.isloading = true
        myShareList(this.shareQueryParams).then((response) => {
          if (response.code === 200) {
            // 关闭遮罩层
            this.$modal.closeLoading()
            uni.stopPullDownRefresh()
            // 关闭节流阀
            this.isloading = false
            // 只要数据请求完毕，就立即按需调用 cb 回调函数
            cb && cb()
            this.deviceCount = response.total
            this.myShareByList = [...this.myShareByList, ...response.rows]
          }
        })
      },
      //跳转设备或门店详细界面
      gotodetaile(shareType, equipmentStoreNo) {
        this.$tab.navigateTo(
          '../../devicelistpkg/sharePage/share_deivce_detailed?equipmentNo=' +
            equipmentStoreNo +
            '&isSharer=0&type=2'
        )
      },
      //切换门店方法
      change(e) {
        //显示全部
        this.tagActive = -1
        this.storeId = e
        uni.setStorageSync('storeId', e)
        this.getDeviceList()
        this.getDeviceTypeList()
      },
      //查询设备分列表公共方法
      getDeviceList() {
        //查询设备列表
        this.storeList.map((item, index) => {
          if (item.storeId == this.storeId) {
            this.storeName = item.storeName
            this.deviceList = item.mkEquipments

            this.isAdmin = item.isAdmin == '1' ? true : false
          }
        })
        console.log('门店列表里面提取出的设备id列表', this.deviceList)
      },
      //查询设备分类共用方法
      getDeviceTypeList() {
        //查询分类列表
        let maps = new Map()
        this.deviceTypeList = this.deviceList

          .map((itme) => ({
            id: parseInt(itme.equipmentTypeId),
            name: itme.mkEquipmentType.equipmentTypeName,
          }))
          .filter((v) => !maps.has(v.id) && maps.set(v.id, 1))
        uni.stopPullDownRefresh()

        console.log('醒发箱分类列表', this.deviceTypeList)
      },
      //添加设备方法
      bindDevice() {
        if (this.isAdmin) {
          this.$tab.navigateTo(
            '/devicelistpkg/devicebind/index?storeId=' +
              this.storeId +
              '&storeName=' +
              this.storeName
          )
        } else {
          this.$modal.showToast('暂无权限,请联系管理员设置管理员权限')
        }
      },
      //查看说明
      gotoOpeating() {
        this.$tab.navigateTo('/devicelistpkg/operating_instructions/index')
      },
      //查询所有分类
      changehomeAll() {
        this.tagActive = -1
        this.getDeviceList()
        this.getDeviceTypeList()
      },
      //切换分类
      changeTag(index) {
        this.getDeviceList()
        this.tagActive = index
        //查询分类id为此分类的设备列表
        this.deviceList = this.deviceList.filter(
          (item) => item.equipmentTypeId == this.tagActive
        )
      },

      onReachBottom() {
        if (this.chooseTab == 1) {
          // 判断是否还有下一页数据
          this.shareQueryParams.maintenanceStatus = 0
          if (
            this.shareQueryParams.pageNum * this.shareQueryParams.pageSize >=
            this.deviceCount
          )
            return uni.$showMsg('数据加载完毕')
        }
        // 判断是否正在请求其它数据，如果是，则不发起额外的请求
        if (this.isloading) return
        //让页码值自增+1
        this.shareQueryParams.pageNum += 1
        // 重新获取列表数据
        this.queryMyshareList()
      },
      //下拉刷新
      onPullDownRefresh() {
        if (this.chooseTab == 0) {
          this.tagActive = -1
          this.getStoreList()
        } else {
          this.empty()
          //重新发起数据请求
          this.queryMyshareList()
        }
      },
      //重置分享设备关键数据
      empty() {
        this.isloading = false
        this.myShareByList = []
        this.shareQueryParams.pageNum = 1
      },

      //跳转设备控制
      gotodeviceContol: async function (equipmentNo, equipmentTypeId, online) {
        if (online) {
          const configlist = await listConfig()
          console.log('带着设备id跳转', configlist)
          //将设备类型和设备号、是否此设备管理员存放缓存
          uni.setStorageSync('equipmentNo', equipmentNo)
          uni.setStorageSync('equipmentTypeId', equipmentTypeId)
          uni.setStorageSync('isAdmin', this.isAdmin)

          if (configlist.wxConnectMQPrefix != '') {
            uni.setStorageSync(
              'subTopic',
              configlist.wxConnectMQPrefix +
                '.' +
                equipmentTypeId +
                '.' +
                equipmentNo
            )
          } else {
            uni.setStorageSync(
              'subTopic',
              'SERVER' + '.' + equipmentTypeId + '.' + equipmentNo
            )
          }
          switch (equipmentTypeId) {
            // c++板类型
            // 竖屏
            case '00000004':
              // this.$tab.navigateTo('/controlpkg/index/index')
              uni.navigateTo({
                url: `/controlpkg/index/index?id=${encodeURIComponent(
                  deviceId1
                )}&number=${encodeURIComponent(deviceNumber1)}`,
              })
              break
            // 横屏
            case '00000001': // 新增的case，处理设备类型ID为'00000001'的情况
              // 如果设备类型ID是'00000001'，则可以执行特定逻辑

              const deviceId1 = equipmentTypeId // 替换为实际的设备ID
              const deviceNumber1 = equipmentNo // 替换为实际的设备编号

              // 使用模板字符串创建URL，并包含查询参数
              uni.navigateTo({
                url: `/controlpkg/index/index?id=${encodeURIComponent(
                  deviceId1
                )}&number=${encodeURIComponent(deviceNumber1)}`,
              })
              // this.$tab.navigateTo('/controlpkg/index/index') // 假设这是针对此设备类型的特定页面路径
              break
            // 安卓板类型
            case '99999998': // 新增的case，处理设备类型ID为'00000001'的情况
              // 如果设备类型ID是'00000001'，则可以执行特定逻辑
              // 跳转tabbar页面
              // this.$tab.switchTab('/pages/test')
              // const params = {
              //   id: equipmentNo,
              //   type: equipmentTypeId,
              //   admin: this.isAdmin,
              //   // 可以继续添加其他参数
              // }
              // 跳转带上id和编号
              const deviceId = equipmentTypeId // 替换为实际的设备ID
              const deviceNumber = equipmentNo
              const devicecilent = this.client
              // 本地存储连接实例

              // 替换为实际的设备编号

              // 使用模板字符串创建URL，并包含查询参数
              uni.navigateTo({
                url: `/test/test/test?id=${encodeURIComponent(
                  deviceId
                )}&number=${encodeURIComponent(deviceNumber)}`,
              })

              // this.$tab.navigateTo('/test/test/test') // 假设这是针对此设备类型的特定页面路径
              // const deviceId = 'your_device_id_here' // 替换为实际的设备ID
              // this.$tab.navigateTo(`/test/test/test?id=${deviceId}`)
              break
            default: {
              this.$modal.msgError('暂无该类型界面')
            }
          }

          // if (equipmentTypeId) {
          //   // 同一块板的不同的屏幕
          //   this.$tab.navigateTo('/controlpkg/index/index')
          // }
        } else {
          this.$modal.msgError('设备已离线')
        }
      },

      // 连接方法
      connect: function () {
        // 随机编号
        // let clientId = 'serve-' + Math.random().toString(16).substr(2, 8)
        // 默认编号
        let clientId = 'serve-' + this.defaultDeviceNumber
        console.log('生成的随机clientId为：' + clientId)
        this.options.clientId = clientId
        // 客户端id
        console.log('连接的id配置', clientId)
        var hosts = '',
          // #ifdef APP-PLUS
          // hosts = 'wss://' + this.serve.host + ':443/mqtt';
          hosts = 'tcp://IP:8083/mqtt'
        // #endif
        // #ifdef H5
        hosts = 'wss://' + this.serve.host + ':443/mqtt'
        // hosts = 'tcp://49.234.42.125:8083/mqtt';
        // hosts = 'tcp://' + this.globalData.serve.host + ':' + this.globalData.serve.wsport + this.globalData.serve.path;
        //#endif
        // #ifdef MP-WEIXIN
        // wx仅仅可以使用体验版
        hosts = 'wxs://' + this.serve.host + '/mqttwss'
        //#endif
        console.log('连接端口号', hosts)
        if (this.client == null || this.client.connented == false) {
          uni.showLoading({
            title: '连接中···',
          })
          //console.log(hosts, this.options)
          this.client = mqtt.connect(hosts, this.options)

          this.client.on('connect', () => {
            uni.hideLoading()
            // this.showToast('连接成功', 1000, 'success')
            console.log('客户端的连接实例', this.client)
            // 更新实例到全局变量去
            getApp().globalData.devicecilent = this.client
            // 连接的时候要订阅一次网页才会出现的
            this.subscribe()
          })
        }

        this.client.on('error', (error) => {
          uni.hideLoading()
          // this.showToast('连接失败!', 1000)
          console.log('连接失败')
          console.log(error)
          // 3s后重新连接
          setTimeout(() => {
            this.connect()
          }, 3000)
          // this.connect()
          // console.log('连接失败')
        })
      },
      // 获取消息方法-也可以放到connect
      watch: function () {
        // 监听来自mq服务器的消息
        this.client.on('message', (topic, message) => {
          console.log('收到来自' + topic + '的消息' + message.toString())
          this.receiveMessage = message
        })
      },
      // 断连方法
      unconnect: function () {
        if (!this.client || !this.client.connected) {
          this.showToast('客户端未连接', 1000)
          return
        }
        this.client.end()
        this.client = null
        // this.showToast('成功断开连接', 1000, 'success')
        console.log('断开连接')
      },
      // 订阅链接方法
      subscribe: function () {
        // 判断是否已成功连接
        if (!this.client || !this.client.connected) {
          this.showToast('客户端未连接', 1000)
          return
        }

        this.client.subscribe(
          this.onTopic,
          {
            qos: this.Qos,
          },
          (error, res) => {
            if (!error) {
              // this.showToast('订阅成功', 1000, 'success')
              console.log('订阅成功')
              console.log('订阅后返回的消息', res)
              // console.log('订阅后返回的消息的字段', res[0].topic)
              // this.receiveMessage = res[0].topic
              // this.client.on('message', (topic, message) => {
              //   console.log('收到的消息', topic)
              //   console.log('收到来自' + topic + '的消息' + message.toString())
              //   this.receiveMessage = message
              // })
            }
          }
        )

        //订阅多个主题
        // this.client.subscribe(
        //   ['one', 'two', 'three'],
        //   { qos: 1 },
        //   (err, msg) => {
        //     console.log(err || '订阅成功')
        //     console.log(msg)
        //   }
        // )
        // 订阅不同 qos 的不同主题
        //    this.client.subscribe(
        // 	        [
        // 	            { hello: 1 },
        // 	            { 'one/two/three': 2 },
        // 	            { '#': 0 }
        // 	        ],
        // 	        (err) => {
        // 	          this.show();console.log(err || '订阅成功')
        // 	        },
        // 	    )

        // });
      },

      showToast: function (title, time, icon = 'none') {
        uni.showToast({
          title: title,
          icon: icon,
        })
        setTimeout(function () {
          uni.hideToast()
        }, time)
      },
    }, //页面清除时把门店缓存清掉和设备连接
    onUnload() {
      uni.removeStorageSync('storeId')
      // 直接调用断联
      this.unconnect()
    },
  }
</script>

<style>
  .choose-tab {
    background-color: #ffffff;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-top: 1rpx solid #dfdfdf;
  }

  .choose-tab-item {
    font-weight: bold;
    width: 50%;
  }

  .activeOne {
    color: #0c89fb;
    border-bottom: 4rpx solid #0c89fb;
  }

  .activeTwo {
    color: #0c89fb;
    border-bottom: 4rpx solid #0c89fb;
  }
  .scroll-list {
    width: auto;
    height: 100%;
    overflow: scroll;
  }

  .base-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 10px 0 10px;
  }

  .base-item {
    background-color: #ffffff;
    margin-bottom: 12px;
    width: 346rpx;
    height: 278rpx;
    border-radius: 10px;
    display: flex;
    align-items: center;
    /* box-shadow: 0px 0px 3px 3px rgba(170, 168, 168, 0.5) */
  }

  .base-icon {
    width: 140rpx;
    height: 160rpx;
  }

  .base-icon-images {
    width: 100%;
    height: 100%;
  }

  .left_right_control {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left-home {
    margin-left: 30rpx;
    width: 300rpx;
  }

  ::v-deep .store-select .uni-select {
    font-size: 32rpx;
    color: #323232;
    font-weight: bold;
    border: 1px solid #f6f6f6;
    border-bottom: solid 1px #f6f6f6;
  }
  ::v-deep .store-select .uni-select__selector-scroll {
    max-height: 270rpx;
  }

  .right-add {
    align-items: center;
    display: flex;
  }

  .right-add-img {
    width: 34rpx;
    height: 34rpx;
    margin: auto 18rpx;
  }

  .right-add-text {
    margin-right: 28rpx;
    font-size: 32rpx;
    color: #323232;
    font-weight: bold;
  }

  .img-barnner {
    width: 100%;
    text-align: center;
    margin-top: 50rpx;
  }

  .img-barnner > image {
    width: 670rpx;
    height: 260rpx;
  }

  .divice-list {
    margin-top: 33rpx;
  }

  .divice-tabs {
    display: flex;
    align-items: center;
  }

  .device-text {
    font-size: 28rpx;
    color: #323232;
    font-weight: bold;
    margin: auto 20rpx;
  }

  .divece-tab {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 75%;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    white-space: nowrap;
  }

  .scroll-view_H {
    width: 100%;
    overflow: scroll;
  }

  .divece-all {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    flex-direction: column;
  }

  .divece-left {
    margin-top: 10rpx;
  }

  .base-name {
    font-size: 32rpx;
    color: #323232;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .isline {
    margin-left: 240rpx;
    display: flex;
    justify-items: center;
  }

  .isline > image {
    width: 28rpx;
    height: 28rpx;
  }

  .isline > text {
    font-size: 24rpx;
    color: #979797;
    margin-left: 5rpx;
  }

  .no-devicelist {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
  }

  .no-devicelist > image {
    margin-top: 200rpx;
    width: 200rpx;
    height: 200rpx;
  }

  .no-devicelist > text {
    margin-top: 20rpx;
  }
</style>
